<template>
	<view class="me-list-item" hover-class="me-list-item-hover" @tap="taplink">
		<view class="me-list-itemleft">
			<view class="icon iconfont" :class="['icon-' + item.zclass ? item.zclass : '', item.colorClass ? item.colorClass : '']"></view>
			{{ item.name }}
		</view>
		<view class="icon iconfont icon-jinru"></view>
	</view>
</template>

<script>
export default {
	props: ['item'],
	methods: {
		taplink() {
			switch (this.item.linkType) {
				case 'navigateTo':
					uni.navigateTo({
						url: this.item.url
					});
					break;
				case 'clean':
					uni.showModal({
						title: '是否要清除缓存',
						cancelText: '取消',
						confirmText: '确认',
						success: res => {
							if (res.confirm) {
								uni.clearStorage();
								uni.showToast({
									title: '清除成功',
									icon: 'none'
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					break;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.me-list-item-hover {
	background-color: #d3d3d3;
}
.me-list-item:last-child {
	border-bottom: 1px solid #f8f8f8;
}
.me-list-item {
	display: flex;
	padding: 20upx 0;
	align-items: center;
	border-top: 1px solid #f8f8f8;
	justify-content: space-between;

	.me-list-itemleft {
		display: flex;
		flex: 1;

		& > view {
			padding-right: 10upx;
			padding-left: 20upx;
		}
	}

	.icon-jinru {
		width: 80upx;
		color: #cfcfcf;
	}

	.icon-history {
		color: #6bc3ff;
	}

	.icon-rz {
		color: #ff7434;
	}
}
</style>
